<template>
  <div class="blockList">
    <van-card  v-for="(detailItem,index) in tableData"
    :key="index"
    :num="detailItem.num"
    :price="detailItem.price"
    :title="detailItem.title"
    :desc="detailItem.sell_point"
    :thumb="detailItem.image"
    @select="toDetails(detailItem.id)">
    >
      <template #tags>
        <van-tag plain type="danger">{{rent}}</van-tag>
        <van-tag plain type="danger">{{deposit}}</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" class="delivery-button" @click="dialogVisible = true">我要发货</van-button>
      </template>
    </van-card>

    <div>
      <van-dialog v-model="dialogVisible" title="标题" show-cancel-button>
        <van-cell-group>
          <van-field v-model="value" label="运单号" placeholder="请输入快递单号" />
        </van-cell-group>
      </van-dialog>
    </div>

  </div>

</template>

<script>
export default {
  name: 'ProductPage',
  data() {
    return {
      tableData:[
        {
          id:1,
          num:2,
          price: '10.00/天',
          title: '大疆无人机',
          sell_point:'超级无敌划线价格指商品的专曾经格发布规范》。若商家单独对划线价格进行说明的，以商家的表述为准。',
          image: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
        },{
          id:2,
          num:2,
          price: '30.00/天',
          title: '大疆无人机',
          sell_point:'超级无敌划线价格指商品的专曾经格发布规范》。若商家单独对划线价格进行说明的，以商家的表述为准。',
          image: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
        },
      ],
      dialogVisible: false
    };
  },
  components: {
  },
  created() {
    //发送get
    this.axios({
      method: "GET",
      url: "/api/name"
    }).then(response => {
      console.log(response);
      this.tableData = response.data.name
    })
  },
  methods:{
    toDetails(id){
      console.log(id)
      this.$router.push({
        path:'/details',
        query:{
          id
        }
      })
    }
  }
}
</script>

<style>
.content {
  padding: 16px 16px 160px;
}
</style>
